<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="include :: header"></head>
<body class="hold-transition skin-blue sidebar-mini">
<!--导入模态框-->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="modal-import-plan">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Excel信息导入</h4>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="form-group">
                        <label>模版</label>
                        <a class="out" th:href="@{/file/装配外购件导入模板.xlsx}">点击下载</a>
                    </div>
                    <div class="form-group">
                        <label>选择Excel文件并上传</label>
                        <input id="import-file" class="btn" type="file" name="file">
                        <p class="help-block">请按模板格式进行导入，信息与模板信息对应。</p>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button id="btn-import" type="button" class="btn btn-success">
                    <span class="Bold">确定</span>
                </button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div>
    </div>
</div>
<section class="content">
    <div class="row" style="margin-bottom: 24px">
        <span style="font-size: 24px" id="h3-drawNo" th:text="${asse.drawNo}"></span>&emsp;&emsp;
        <span style="font-size: 24px" id="h3-drawName" th:text="${asse.drawName}"></span>
        <a id="btn-save" shiro:hasPermission="asseOrd:submit:edit" href="javascript:void(0);"
           class="btn btn-info pull-right" style="margin-right: 10px">
            <span class="Bold">确定</span>
        </a>
    </div>
    <form id="sheetForm" class="form-horizontal">
        <div class="row">
            <div class="col-xs-12" style="margin-left: 4%;padding-right: 6%;">
                <input type="hidden" name="id" th:value="${asse.id}">
                <table class="t1 t3">
                    <thead>
                    <tr>
                        <td colspan="9">
                            <img th:src="@{/img/logo3.jpg}" width="64px" height="40px" style="margin-top: -30px">
                            <div style="display: inline-block;margin-top: 5px;margin-left: 20px">
                                <span style="letter-spacing: 24px;display: block;line-height: 20px">&nbsp;辽宁忠旺机械设备制造有限公司</span>
                                <span style="display: block;font-size: 12px;line-height: 20px">Liaoning Zhongwang Machinery Equipment Manufacturing Co., Ltd</span>
                            </div>
                        </td>
                        <td colspan="3">装配派工单</td>
                        <td style="width: 3.3%"></td>
                    </tr>
                    <tr>
                        <td style="width: 6%">生产令号</td>
                        <td style="width: 11%">
                            <input id="prodNo" type="text" class="form-control" name="prodNo" th:value="${asse.prodNo}"
                                   readonly>
                        </td>
                        <td style="width: 7.3%">项目名称</td>
                        <td colspan="2">
                            <input id="proCode" name="proCode" type="hidden" th:value="${asse.proCode}">
                            <input id="proUnit" name="proUnit" type="hidden" th:value="${asse.proUnit}">
                            <input id="proName" type="text" class="form-control" name="proName"
                                   th:value="${asse.proName}" readonly>
                        </td>
                        <td style="width: 6%">订单数量</td>
                        <td style="width: 7%">
                            <input id="proNum" type="text" class="form-control" name="proNum" th:value="${asse.proNum}"
                                   readonly>
                        </td>
                        <td style="width: 9.1%">类型</td>
                        <td style="width: 6.9%">
                            自动化
                            <input id="special" type="hidden" name="special" value="自动化">
                        </td>
                        <td style="width: 7.9%">部分</td>
                        <td style="width: 9.8%" colspan="2">
                            <select id="partId" class="form-control" name="partId">
                                <option value="">请选择</option>
                                <option th:each="p : ${parts}" th:value="${p.id}"
                                        th:text="|${p.special}-${p.proPart}|"
                                        th:selected="${p.id == asse.partId}"></option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td rowspan="2">装配图号</td>
                        <td colspan="2" rowspan="2">
                            <input id="drawNo" type="text" class="form-control" name="drawNo" th:value="${asse.drawNo}">
                        </td>
                        <td rowspan="2" style="width: 6%">装配名称</td>
                        <td colspan="3" rowspan="2">
                            <input id="drawName" type="text" class="form-control" name="drawName" th:value="${asse.drawName}">
                        </td>
                        <td rowspan="2">装配数量</td>
                        <td rowspan="2">
                            <input id="drawNum" type="number" step="0.1" class="form-control" name="drawNum"
                                   th:value="${asse.drawNum}">
                        </td>
                        <td>要求完成时间</td>
                        <td colspan="2">
                            <input id="compTime" type="text" class="form-control" name="compTime"
                                   th:value="${asse.compTime}" autocomplete="off">
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>部门</td>
                        <td colspan="2">
                            <select id="deptId" class="form-control" name="deptId">
                                <option value="">请选择</option>
                                <option th:each="s : ${depts}" th:value="${s.id}"
                                        th:text="${s.name}" th:selected="${s.id == asse.deptId}"></option>
                            </select>
                        </td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="card">
                    <tr>
                        <td>注<br>意<br>事<br>项</td>
                        <td colspan="11">
                            <textarea id="remark" class="form-control" name="remark" rows="20" th:utext="${asse.remark}"
                                      autocomplete="off"></textarea>
                        </td>
                        <td></td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="col-xs-11" style="font-size: 14px;line-height: 200%;margin-left: 4%;">
                <div class="col-xs-3" style="padding-left: 0">提报人： [[${session.user.name}]]</div>
                <div class="col-xs-3 bottom form-inline">联系电话：
                    <input class="form-control" style="width:60%;border: none;border-bottom: 1px solid #000;"
                           type="text" name="createTel" th:value="${asse.createTel}">
                </div>
            </div>
        </div>
    </form>
    <br>
    <hr>
    <div class="row">
        <div class="col-xs-12" style="margin-left: 4%;padding-right: 6%;">
            <h4 class="pull-right" style="margin-bottom: 10px;margin-right: 50%;">装配外购件信息</h4>
            <a shiro:hasPermission="asseOrd:buy:edit" href="javascript:void(0);"
               class="btn btn-info pull-left"
               onclick="js.modal.open('modal-import-plan')">
                <span class="Bold">数据导入</span>
            </a>
            <a id="btn-saveBuy" shiro:hasPermission="asseOrd:buy:edit" href="javascript:void(0);"
               class="btn btn-success pull-left" style="margin-left: 4px;">
                <span class="Bold">保存</span>
            </a>
            <form id="buyForm" class="form-horizontal">
                <input type="hidden" name="sheetId" th:value="${asse.id}">
                <table class="t1 t3">
                    <thead>
                    <tr>
                        <td style="width: 4%">序号</td>
                        <td style="width: 25%">物料名称</td>
                        <td style="width: 13%">跟踪号</td>
                        <td style="width: 7%">使用数量</td>
                        <td style="width: 5%">单位</td>
                        <td style="width: 10%">回货状态</td>
                        <td>存放位置</td>
                        <td>备注</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="out">
                    <tr th:each="d : ${buyList}">
                        <td th:text="${dStat.count}"></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" th:value="${d.matNameDesc}"
                                   autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" th:value="${d.trackCode}"
                                   autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" th:value="${d.useNum}"
                                   autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" th:value="${d.unit}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" th:value="${d.backStatus}"
                                   autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" th:value="${d.position}"
                                   autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" th:value="${d.comment}"
                                   autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    <tr th:if="${buyList.size()} eq 0">
                        <td>1</td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
</section>
<div th:include="include :: footer"></div>
<script th:inline="javascript">
    let table1, table3;

    /** 计算表格序号 */
    function computerNo() {
        $("form#buyForm table tbody tr").each(function (i, e) {
            $(this).children("td:first").text(i + 1);
        });
    }

    /** 获取部分 */
    function getPart() {
        let code = $("#proCode").val();
        let type = $("#special").val();
        switch (type) {
            case '机械' :
            case '流体' :
            case '自动化' :
                fetchPart(code, type);
                break;
            case '外观' :
                fetchPart(code, null);
                break;
        }
    }

    /** 获取部分 */
    function fetchPart(code, type) {
        js.get({
            url: ctx + 'assemble/dispatch/partList',
            data: {
                code : code,
                type : type
            },
            success: function (result) {
                $("#partId").empty().append(`<option value="">请选择</option>`);
                result.forEach(value => {
                    if (value) {
                        $("#partId").append(`<option value="${value.id}">${value.special}-${value.proPart}</option>`);
                    }
                })
            }
        })
    }

    $(function () {

        /** 注意事项换行处理 */
        $("[name=remark]").each(function () {
            $(this).val(js.textToValue($(this).val()));
        })

        /** 类型值改变，联动部分 */
        $("#special").change(function () {
            getPart();
        });

        /** 保存装配派工单 */
        $("#btn-save").click(function () {
            let $this = $(this);
            js.post({
                url: ctx + "verifyProStatus/isDesignByProCode",
                data: {proCode: $("#proCode").val()},
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        let res = js.vd({
                            id: 'sheetForm',
                            notEmpty: ['prodNo', 'proCode', 'partId', 'drawName', 'drawNum', 'deptId', 'createTel']
                        })
                        if (!res) {
                            return;
                        }

                        $this.attr('disabled', true);
                        js.submit({
                            formId: "sheetForm",
                            url: ctx + 'assemble/dispatch/edit',
                            data: new FormData($("#sheetForm")[0]),
                            success: function (result) {
                                if (result.type === web_status.SUCCESS) {
                                    location.href = ctx + "assemble/dispatch/subPage";
                                } else {
                                    js.modal.warning(result.msg);
                                }
                            }
                        });
                        $this.removeAttr('disabled');
                    } else {
                        let res = js.vd({
                            id: 'sheetForm',
                            notEmpty: ['prodNo', 'proCode',  'drawName', 'drawNum', 'deptId', 'createTel']
                        })
                        if (!res) {
                            return;
                        }

                        $this.attr('disabled', true);
                        js.submit({
                            formId: "sheetForm",
                            url: ctx + 'assemble/dispatch/edit',
                            data: new FormData($("#sheetForm")[0]),
                            success: function (result) {
                                if (result.type === web_status.SUCCESS) {
                                    location.href = ctx + "assemble/dispatch/subPage";
                                } else {
                                    js.modal.warning(result.msg);
                                }
                            }
                        });
                        $this.removeAttr('disabled');
                    }
                }
            });

        });

        /** ----------以下保存制作件和采购件明细--------------------------------- */

        /** 添加一行 */
        $("#buyForm").on('click', '.out-add', function () {
            $(this).parents("tr").after(`
                    <tr>
                        <td></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
            `);
            computerNo();
        });
        /** 删除行 */
        $('#buyForm').on('click', '.out-del', function () {
            $(this).parents("tr").remove();
            if ($("form#buyForm table tbody tr").length === 0) {
                $("#out").append(`
                      <tr>
                        <td></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                            `)
            }
            computerNo();
        });

        /** 导入 */
        $('#btn-import').click(function() {

            let files = $("#import-file")[0].files;
            let fileReader = new FileReader();
            fileReader.onload = function(ev) {
                try {
                    let data = ev.target.result,
                        workbook = XLSX.read(data, {type: 'binary'}), // 以二进制流方式读取得到整份excel表格对象
                        plans = []; // 存储获取到的数据
                    // 遍历每张表读取
                    for (let sheet in workbook.Sheets) {
                        if (workbook.Sheets.hasOwnProperty(sheet)) {
                            plans = plans.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                            break; // 只取第一张表
                        }
                    }
                    if (plans.length === 0) {
                        js.modal.alert("无法读取文件内容");
                    } else {
                        $("#out").empty();
                        /** 动态添加下拉列表的记录数*/
                        plans.forEach((value, index) => {
                            let a = value['使用数量'] || '';
                        if ($.isNumeric(a)){
                            a = Math.floor(a);
                        }
                        let b = value['备注'] || '';
                        let c = value['跟踪号'] || '';
                        let d = value['存放位置'] || '';
                        let m = value['回货状态'] || '';
                        $("#out").append(`
                    <tr>
                        <td></td>
                        <td>
                            <input type="text" class="form-control" name="matNameDesc" value="${value['物料名称']}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="trackCode" value="${c}" autocomplete="off">
                        </td>
                        <td>
                            <input type="number" class="form-control" name="useNum" value="${a}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="unit" value="${value['单位']}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="backStatus" value="${m}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="position" value="${d}" autocomplete="off">
                        </td>
                        <td>
                            <input type="text" class="form-control" name="comment" value="${b}" autocomplete="off">
                        </td>
                        <td>
                            <span class="out-add" title="添加"><i class="fa fa-plus text-info"></i> </span>
                            <span class="out-del" title="删除"><i class="fa fa-remove text-red"></i> </span>
                        </td>
                    </tr>
                            `);
                    });
                        computerNo();
                        js.modal.hide("modal-import-plan");
                    }
                } catch (e) {
                    js.modal.alert("无法读取文件或文件类型有错误");
                }
            };
            // 以二进制方式打开文件
            fileReader.readAsBinaryString(files[0]);
        });
        /** 保存装配外购件信息 */
        $("#btn-saveBuy").click(function () {
            let $this = $(this);
            let res = js.vd({
                id: 'buyForm',
                notEmpty: ['matNameDesc', 'useNum', 'unit', 'backStatus']
            })
            if (!res) {
                return;
            }
            $this.attr('disabled', true);
            js.submit({
                formId: "buyForm",
                url: ctx + 'assemble/assMake/saveBuy',
                data: new FormData($("#buyForm")[0]),
                success: function (result) {
                    if (result.type === web_status.SUCCESS) {
                        js.modal.success(result.msg);
                        window.location.reload();
                    } else {
                        js.modal.warning(result.msg);
                    }
                }
            });
            $this.removeAttr('disabled');
        });

    })

</script>
</body>
</html>
